<template lang="pug">
Chart(:options='options')
</template>

<script setup name="ChartPie">
import Chart from './index.vue'
import _ from 'lodash-es'
const props = defineProps({
  chartData: {
    type: Object,
    default: () => {
      return {
        series: []
      }
    }
  },
  chartOption: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const defaultOption = {
  title: {
    text: '',
    x: 'left',
    textStyle: {
      fontSize: 14,
      color: '#ffffff'
    }
  },
  tooltip: {
    show: false,
    trigger: 'item',
    confine: true // 是否将 tooltip 框限制在图表区域内
  },
  legend: {
    show: true,
    left: 'center',
    top: 8,
    icon: 'circle',
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 16,
    padding: [0, 0, 0, 0],
    textStyle: {
      color: '#ffffff'
    }
  },
  grid: {
    left: 2,
    right: 2,
    top: 2,
    bottom: 2,
    borderColor: '#f06'
  }
}

const options = computed(() => {
  const option = {
    title: _.assign({}, defaultOption.title, props.chartOption.title || {}),
    tooltip: _.assign({}, defaultOption.tooltip, props.chartOption.tooltip || {}),
    grid: _.assign({}, defaultOption.grid, props.chartOption.grid || {}),
    legend: _.assign({}, defaultOption.legend, props.chartOption.legend || {}),
    series: _.map(props.chartData.series, ({ type, name, data, ...rest }) => {
      return {
        type: type || 'pie',
        name,
        data: data || [],
        ...rest
      }
    })
  }
  return option
})
</script>

